<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  
  <title>staticPath | H5教案</title>

  
  <meta name="author" content="John Doe">
  

  
  <meta name="description" content="静态资源目录案例服务器静态地址目录前端
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html">
  

  
  
  <meta name="keywords" content="">
  

  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta property="og:title" content="staticPath"/>

  <meta property="og:site_name" content="H5教案"/>

  
  <meta property="og:image" content="/ericxie-book/favicon.ico"/>
  

  <link href="/ericxie-book/favicon.ico" rel="icon">
  <link rel="alternate" href="/ericxie-book/atom.xml" title="H5教案" type="application/atom+xml">
  <link rel="stylesheet" href="/ericxie-book/css/style.css" media="screen" type="text/css">
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
<div class="blog">
  <div class="content">

    <header>
  <div class="site-branding">
    <h1 class="site-title">
      <a href="/ericxie-book/">H5教案</a>
    </h1>
    <p class="site-description"></p>
  </div>
  <nav class="site-navigation">
    <ul>
      
    </ul>
  </nav>
</header>

    <main class="site-main posts-loop">
    <article>

  
    
    <h3 class="article-title"><span>staticPath</span></h3>
    
  

  <div class="article-top-meta">
    <span class="posted-on">
      <a href="/ericxie-book/2021/01/27/staticPath/" rel="bookmark">
        <time class="entry-date published" datetime="2021-01-27T04:48:11.000Z">
          2021-01-27
        </time>
      </a>
    </span>
  </div>


  

  <div class="article-content">
    <div class="entry">
      
        <h2 id="静态资源目录案例"><a href="#静态资源目录案例" class="headerlink" title="静态资源目录案例"></a>静态资源目录案例</h2><h3 id="服务器静态地址目录"><a href="#服务器静态地址目录" class="headerlink" title="服务器静态地址目录"></a>服务器静态地址目录</h3><p>前端</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;ul&gt;&lt;/ul&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line"></span><br><span class="line">        var ul;</span><br><span class="line">        init();</span><br><span class="line">        <span class="keyword">function</span> <span class="function"><span class="title">init</span></span>()&#123;</span><br><span class="line">            ul=document.querySelector(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line">            ul.addEventListener(<span class="string">&quot;click&quot;</span>,clickHandler);</span><br><span class="line">            window.addEventListener(<span class="string">&quot;popstate&quot;</span>,stateHandler);</span><br><span class="line">            ajax();</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">function</span> ajax(data)&#123;</span><br><span class="line">            var xhr=new XMLHttpRequest();</span><br><span class="line">            xhr.addEventListener(<span class="string">&quot;load&quot;</span>,loadHandler);</span><br><span class="line">            xhr.open(<span class="string">&quot;post&quot;</span>,<span class="string">&quot;http://localhost:4001&quot;</span>);</span><br><span class="line">            xhr.send(data);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">function</span> loadHandler(e)&#123;</span><br><span class="line">            var list=JSON.parse(e.target.response);</span><br><span class="line">            history.pushState(list,<span class="string">&quot;&quot;</span>);</span><br><span class="line">            setUList(list);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">function</span> setUList(list)&#123;</span><br><span class="line">            ul.innerHTML=list.reduce((value,item)=&gt;&#123;</span><br><span class="line">                var arr=item.value.split(<span class="string">&quot;\\&quot;</span>);</span><br><span class="line">                var names=arr.pop();</span><br><span class="line">                var path=arr.join(<span class="string">&quot;\\&quot;</span>)+<span class="string">&quot;\\&quot;</span>;</span><br><span class="line">                <span class="built_in">return</span> value+`&lt;li&gt;<span class="variable">$&#123;item.file ? names : &quot;&lt;a href=&#x27;javascript:void(0)&#x27; path=&#x27;&quot;+path+&quot;&#x27;&gt;&quot;+names+&quot;&lt;/a&gt;&quot;&#125;</span>&lt;/li&gt;`</span><br><span class="line">            &#125;,<span class="string">&quot;&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">function</span> stateHandler(e)&#123;</span><br><span class="line">            setUList(e.state);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">function</span> clickHandler(e)&#123;</span><br><span class="line">            <span class="keyword">if</span>(e.target.nodeName!==<span class="string">&quot;A&quot;</span>)<span class="built_in">return</span>;</span><br><span class="line">            // ajax(e.target.textContent.replace(/\\/g,<span class="string">&quot;\\\\&quot;</span>)+<span class="string">&quot;\\&quot;</span>);</span><br><span class="line">            var path=e.target.getAttribute(<span class="string">&quot;path&quot;</span>).replace(/\\/g,<span class="string">&quot;\\&quot;</span>);</span><br><span class="line">            ajax(path+e.target.textContent+<span class="string">&quot;\\&quot;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<p>服务端</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">var http=require(<span class="string">&quot;http&quot;</span>);</span><br><span class="line">var fs=require(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> createServer(fn)&#123;</span><br><span class="line">        http.createServer((inComeMsg,response)=&gt;&#123;</span><br><span class="line">            response.writeHead(200,&#123;</span><br><span class="line">                <span class="string">&quot;Access-Control-Allow-Origin&quot;</span>:<span class="string">&quot;*&quot;</span></span><br><span class="line">            &#125;)</span><br><span class="line">            var data=<span class="string">&quot;&quot;</span>;</span><br><span class="line">            inComeMsg.on(<span class="string">&quot;data&quot;</span>,_data=&gt;data+=_data);</span><br><span class="line">            inComeMsg.on(<span class="string">&#x27;end&#x27;</span>,()=&gt;&#123;</span><br><span class="line">                fn(&#123;data:data,res:response&#125;);</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;).listen(4001);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> getPathList(src)&#123;</span><br><span class="line">   <span class="keyword">if</span>(src===<span class="string">&quot;&quot;</span>) src=<span class="string">&quot;D:\\&quot;</span>;</span><br><span class="line">    <span class="built_in">return</span> new Promise((resolve,reject)=&gt;&#123;</span><br><span class="line">        fs.readdir(src,(error,data)=&gt;&#123;</span><br><span class="line">          var dirlist=[]</span><br><span class="line">          var fileList=[];</span><br><span class="line">          data.forEach(item=&gt;&#123;</span><br><span class="line">              try&#123;</span><br><span class="line">                var <span class="built_in">stat</span>=fs.statSync(src+item);</span><br><span class="line">                <span class="keyword">if</span>(stat.isFile())fileList.push(&#123;value:src+item,file:stat.isFile()&#125;)</span><br><span class="line">                <span class="keyword">else</span> dirlist.push(&#123;value:src+item,file:stat.isFile()&#125;)</span><br><span class="line">              &#125;catch(e)&#123;</span><br><span class="line"></span><br><span class="line">              &#125;</span><br><span class="line">          &#125;)</span><br><span class="line">            resolve(dirlist.concat(fileList));</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">createServer((&#123;data,res&#125;)=&gt;&#123;</span><br><span class="line">    getPathList(data).<span class="keyword">then</span>(list=&gt;&#123;</span><br><span class="line">        res.end(JSON.stringify(list));</span><br><span class="line">    &#125;)</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="静态资源目录"><a href="#静态资源目录" class="headerlink" title="静态资源目录"></a>静态资源目录</h3><p>服务端a.js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">var path=require(<span class="string">&quot;path&quot;</span>);</span><br><span class="line">var mime=require(<span class="string">&quot;mime&quot;</span>);//mime插件，用来获取文件是否类型</span><br><span class="line">var fs=require(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> myReadFile(file)&#123;</span><br><span class="line">   <span class="built_in">return</span> new Promise((resolve,reject)=&gt;&#123;</span><br><span class="line">        fs.readFile(file,(err,data)=&gt;&#123;</span><br><span class="line">            <span class="keyword">if</span>(err)&#123;</span><br><span class="line">                reject(null);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                resolve(data);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">   &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">async <span class="keyword">function</span> readStaticFile(filePathName)&#123;</span><br><span class="line">    <span class="built_in">let</span> ext=path.parse(filePathName).ext;//是否有扩展名</span><br><span class="line">    <span class="built_in">let</span> mimeType=mime.getType(ext) || <span class="string">&quot;text/html&quot;</span>;//获取这个扩展名对应的文件类型</span><br><span class="line">    <span class="built_in">let</span> data=null;</span><br><span class="line">    <span class="keyword">if</span>(fs.existsSync(filePathName))&#123;</span><br><span class="line">        <span class="keyword">if</span>(ext)&#123;</span><br><span class="line">            await myReadFile(filePathName).<span class="keyword">then</span>(_data=&gt;data=_data).catch(err=&gt;data=err);</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            await myReadFile(path.join(filePathName,<span class="string">&quot;./index.html&quot;</span>)).<span class="keyword">then</span>(_data=&gt;data=_data).catch(err=&gt;data=err);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">return</span> &#123;data,mimeType&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">module.exports=readStaticFile;</span><br></pre></td></tr></table></figure>
<p>b.js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">var http=require(<span class="string">&quot;http&quot;</span>);</span><br><span class="line">var path=require(<span class="string">&quot;path&quot;</span>);</span><br><span class="line">var readStaticFile=require(<span class="string">&quot;./a&quot;</span>);</span><br><span class="line">http.createServer((inCommMeg,response)=&gt;&#123;</span><br><span class="line">    <span class="built_in">let</span> urlString=inCommMeg.url;</span><br><span class="line">    <span class="built_in">let</span> filePathName=path.join(__dirname,urlString);</span><br><span class="line">    console.log(filePathName);</span><br><span class="line">    readStaticFile(filePathName).<span class="keyword">then</span>((&#123;data,mimeType&#125;)=&gt;&#123;</span><br><span class="line">        console.log(data);</span><br><span class="line">        response.writeHead(200,&#123;</span><br><span class="line">            <span class="string">&quot;Content-type&quot;</span>:mimeType+<span class="string">&quot;;charset=utf-8&quot;</span>,</span><br><span class="line">            <span class="string">&quot;Access-Control-Allow-Origin&quot;</span>:<span class="string">&quot;*&quot;</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">if</span>(!data) response.write(<span class="string">&quot;错误的数据&quot;</span>);</span><br><span class="line">        <span class="keyword">else</span> response.write(data);</span><br><span class="line">        response.end();</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).listen(4001);</span><br></pre></td></tr></table></figure>
      
    </div>

  </div>

  <div class="article-footer">
    <div class="article-meta pull-left">

    

    

    </div>

    
  </div>
</article>

  






    </main>

    <footer class="site-footer">
  <p class="site-info">
    Proudly powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and
    Theme by <a href="https://github.com/CodeDaraW/Hacker" target="_blank">Hacker</a>
    </br>
    
    &copy; 2021 John Doe
    
  </p>
</footer>
    
    
  </div>
</div>
</body>
</html>